<template>
  <div :class="hoverShow ? 'img-div-hover' : 'img-div'">
    <!-- <img :src="item.img"> -->
    <img :src="item.picture" />
    <a-button class="delete-btn" @click="deleteShot(item)">
      <a-icon-font class="icon" type="iconicon-beifen5"></a-icon-font>
    </a-button>
    <a-popconfirm
      title="将会覆盖当前版本，是否恢复？"
      ok-text="确定"
      cancel-text="取消"
      @confirm="confirm(item)"
      @visibleChange="handleVisibleChange"
    >
      <!-- <a href="#">Delete</a> -->
      <a-icon-font slot="icon" type="iconweiwanpeizhi"></a-icon-font>
      <a-button class="recover-btn"><strong>恢复此版本</strong></a-button>
    </a-popconfirm>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import DataViewStore from '@/store/modules/dataview'
import ProjectStore, { Project } from '@/store/modules/project'
import { recoverSnapshot, deleteSnapshot } from '@/api/pipeline'

@Component({
  components: {},
})
export default class RunLog extends Vue {
  public get project(): Project | null {
    return ProjectStore.activeProject
  }

  private get pipelineId() {
    return DataViewStore.getPipelineId
  }

  private get projectId() {
    return DataViewStore.projectId
  }

  @Prop({
    type: Object,
    default: () => {
      return {}
    },
  })
  item!: object
  public hoverShow: boolean = false

  public mounted() {
    // console.log(this.item)
  }

  public confirm(item: any) {
    recoverSnapshot({
      data: {
        pipelineId: item.pipelineId,
        pipelineSnapshotId: item.pipelineSnapshotId,
        projectId: this.projectId,
      },
    })?.then((response: any) => {
      if (response.data.code === 100) {
        this.$message.success('恢复成功！', 3)
        DataViewStore.setPipelineId(item.pipelineId)
        const parameters = {
          id: this.projectId,
          pipelineId: item.pipelineId,
        }
        DataViewStore.queryPipelineNodes(parameters)
        DataViewStore.setPipelineSnapshotId(item.pipelineSnapshotId)
      }
    })
  }

  public handleVisibleChange(value: boolean) {
    this.hoverShow = value
  }

  public deleteShot(item: any) {
    deleteSnapshot({
      data: {
        pipelineId: item.pipelineId,
        pipelineSnapshotIds: [item.pipelineSnapshotId],
        projectId: this.projectId,
      },
    })?.then((response: any) => {
      if (response.data.code === 100) {
        this.$message.success('删除成功！', 3)
        // this.querySnapshot()
        this.$emit('update-list')
      }
    })
  }
}
</script>

<style scoped lang="less">
.img-div {
  border: 1px solid #e9e9e9;
  border-radius: 2px;
  height: 230px;
  margin: 16px 0;
  position: relative;

  img {
    height: 100%;
    width: 100%;
  }

  .recover-btn {
    background: rgba(103, 113, 252, 0.1);
    border: 0;
    border-radius: 0 0 2px 2px;
    bottom: 0;
    color: #6973ff;
    display: none;
    height: 52px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 200;
  }

  .delete-btn {
    align-content: center;
    align-items: center;
    background-color: rgba(103, 113, 252, 0.09);
    border: 0;
    border-radius: 50%;
    display: none;
    height: 32px;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 32px;

    .icon {
      color: #6973ff;
      font-size: 16px;
      transform: translateX(-50%);
    }
  }

  .warning-icon {
    font-size: 20px !important;
  }

  .ant-popover-message > .anticon {
    font-size: 20px;
  }

  &:hover {
    border: 1px solid #e9e9e9;
    border-radius: 2px;
    box-shadow: 0 2px 8px 1px rgba(88, 98, 230, 0.15);

    .recover-btn {
      display: inline-block;
    }

    .delete-btn {
      display: inline-block;
    }
  }
}

.img-div-hover {
  border: 1px solid #e9e9e9;
  border-radius: 2px;
  box-shadow: 0 2px 8px 1px rgba(88, 98, 230, 0.15);
  height: 230px;
  margin: 16px 0;
  position: relative;

  img {
    height: 100%;
    width: 100%;
  }

  .recover-btn {
    background: rgba(103, 113, 252, 0.1);
    border: 0;
    border-radius: 0 0 2px 2px;
    bottom: 0;
    color: #6973ff;
    display: inline-block;
    height: 52px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 200;
  }

  .delete-btn {
    align-content: center;
    align-items: center;
    background-color: rgba(103, 113, 252, 0.09);
    border: 0;
    border-radius: 50%;
    display: inline-block;
    height: 32px;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 32px;

    .icon {
      color: #6973ff;
      font-size: 16px;
      transform: translateX(-50%);
    }
  }

  .warning-icon {
    font-size: 20px !important;
  }

  .ant-popover-message > .anticon {
    font-size: 20px;
  }

  &:hover {
    border: 1px solid #e9e9e9;
    border-radius: 2px;
    box-shadow: 0 2px 8px 1px rgba(88, 98, 230, 0.15);

    .recover-btn {
      display: inline-block;
    }

    .delete-btn {
      display: inline-block;
    }
  }
}
</style>
